Using jQuery Mobile

For Your Next Web Application

Andy Matthews

What's this session about?

jQuery Mobile Framework

Theming

Efficiency & Workflow

Can I download your files?

Yep!

URL GOES HERE

Can I tweet about this session?

Absolutely!

#usingJQM

Can I tell you
"awesome job"?

MAX companion app icon

MAX companion app session detail

MAX companion app session detail

Gets you a chance to win books, and an iPod Nano

About Me

Nashville

Family

Work

I tweet

@commadelimited

I blog

andyMatthews.net

I write


jQuery Mobile Web Development Essentials

I code

github.com/commadelimited

Elevator Pitch

Why jQuery Mobile

  • A touch-Optimized web framework for smartphones & tablets
  • Graded browser support
  • Includes UI, URL routing and theming. Built on HTML 5
  • 5 themes and 24 icons built in
  • Originally released in October 2010
  • Current version: 1.3.1. Released on 10 April, 2013
  • Next version: summer of 2013

Sponsors

Download from http://jquerymobile.com

Or use jQuery's CDN

jquery.mobile-1.3.0.min.css
jquery.mobile-1.3.0.min.js


<!-- standard include -->
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
						

<!-- custom theme include -->
<link rel="stylesheet" href="jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" href="custom-theme.min.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
						

http://www.jqmgallery.com/

Initial Research

Which browsers to suppport?

Device Lab

Supported Devices

Full experience with Ajax animated transitions.

  • Apple iOS 3.2*-6.1
  • Android 2.1-2.3
  • Android 3.2 (Honeycomb)
  • Android 4.0 (ICS)
  • Android 4.1 (Jelly Bean)
  • Windows Phone 7.5-7.8
  • Blackberry 6-10
  • Blackberry Playbook(1.0-2.0)
  • Palm WebOS (1.4-3.0)
  • Firefox Mobile 18
  • Chrome for Android 18
  • Skyfire 4.1
  • Opera Mobile 11.5-12
  • Meego 1.2
  • Tizen
  • SamsungBada 2.0
  • UC Browser
  • Kindle 3, Fire, and Fire HD
  • Nook Color 1.4.1
  • Chrome Desktop
  • Safari Desktop
  • Firefox Desktop 10-18
  • Internet Explorer 8-10
  • Opera Desktop 10-12

Enhanced experience without Ajax navigation

  • Blackberry 5.0*
  • Opera Mini 7
  • Nokia Symbian^3
  • Internet Explorer 7

Basic, non-enhanced HTML experience

  • Internet Explorer 6 and older
  • iOS 3.x and older
  • Blackberry 4.x
  • Windows Mobile
  • All older smartphone platforms and featurephones

can it be code time?

Open demo-01.html

Progressive enhancement

Progressive

proceeding step by step.

Enhancement

to raise to a higher degree

Incremental Improvements in Appearance


<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Checkboxes, horizontal controlgroup:</legend>
    <input type="ckbx" name="ckbx-6" id="ckbx-6">
    <label for="ckbx-6">b</label>
    <input type="ckbx" name="ckbx-7" id="ckbx-7" checked="">
    <label for="ckbx-7"><em>i</em></label>
    <input type="ckbx" name="ckbx-8" id="ckbx-8">
    <label for="ckbx-8">u</label>
</fieldset>
						

Incremental Improvements in Functionality


<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100">
						

Incremental Improvements in Layout

can it be code time?

Open demo-02.html

Theming & Customization

Color Schemes & Swatches

Form Elements

Icons

The Extra Mile

Built in themes are great

At first i was like

Then i was all like

Themeroller to the rescue

http://jquerymobile.com/themeroller/

ThemeRoller on Github

And beyond...

Default icons are nice

 

 

More icons are better

 

 

 

 

 

commadelimited/jQuery-Mobile-Icon-Pack

Too many are never enough!

 

commadelimited/jQuery-Mobile-Icon-Pack

Build your own!

Custom icon font builder

Custom plugins

Why write my own plugin?

  • You have a need
  • Learn something
  • Impress your friends

Demo Time

Resources

The End

Questions? Comments? Snide remarks?